<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <div class="home-nav">
      <el-menu class="el-menu-demo" mode="horizontal">
        <el-menu-item index="0">
          <div class="logo">
            <img src="../assets/logo.png" alt="">
            <b>后台管理系统</b>
          </div>
        </el-menu-item>
        <el-menu-item index="1">处理中心</el-menu-item>
        <el-submenu index="2">
          <template slot="title">我的工作台</template>
          <el-menu-item index="2-1">选项1</el-menu-item>
          <el-menu-item index="2-2">选项2</el-menu-item>
          <el-menu-item index="2-3">选项3</el-menu-item>
          <el-submenu index="2-4">
            <template slot="title">选项4</template>
            <el-menu-item index="2-4-1">选项1</el-menu-item>
            <el-menu-item index="2-4-2">选项2</el-menu-item>
            <el-menu-item index="2-4-3">选项3</el-menu-item>
          </el-submenu>
        </el-submenu>
        <el-menu-item index="3">消息中心</el-menu-item>
        <el-menu-item index="4">
          <el-dropdown>
            <div class="avatar">
              <img src="../assets/imgs/123.jpg" alt="">
            </div>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>我的</el-dropdown-item>
              <el-dropdown-item>设置</el-dropdown-item>
              <el-dropdown-item @click.native='logout'>退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 主体区域 -->
    <div class="home-main">
      <!-- 侧边栏 -->
      <div class="main-aside">
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
        </el-radio-group>
        <el-menu unique-opened class="el-menu-vertical-demo" :collapse="isCollapse" router :default-active='$route.path'>
          <el-submenu :index="menu.id + ''" v-for="menu in menuList" :key='menu.id'>
            <template slot="title">
              <i :class="icons[menu.id]"></i>
              <span slot="title">{{menu.authName}}</span>
            </template>
            <el-menu-item-group>
              <el-menu-item style="padding-left: 65px;" :index="'/home/'+item.path" v-for="item in menu.children" :key='item.id'>
                <!-- @click='saveActive(item.path)' -->
                {{item.authName}}
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </div>
      <!-- 内容区域 -->
      <div class="main-content">
        <!-- 切换展开和收起状态 -->
        <div class="toggle">
          <el-button :icon='foldIcon' @click.native='changeIsCollapse'>
          </el-button>
        </div>
        <!-- 挖个坑 -->
        <router-view class="main-rv"></router-view>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'home',
  data() {
    return {
      isCollapse: false,
      foldIcon: 'el-icon-s-fold',
      // 存放菜单栏
      menuList: [],
      // 存放图标的对象 键是菜单的id 值是图标的class
      icons: {
        125: 'el-icon-s-custom',
        103: 'el-icon-s-tools',
        101: 'el-icon-s-goods',
        102: 'el-icon-s-order',
        145: 'el-icon-s-data'
      }
      // 存放菜单栏激活状态
      // path: '',
    }
  },
  methods: {
    changeIsCollapse() {
      // 切换展开和收起
      this.isCollapse = !this.isCollapse
      // 修改符号
      this.isCollapse ? (this.foldIcon = 'el-icon-s-unfold') : (this.foldIcon = 'el-icon-s-fold')
    },
    // 获取左侧菜单栏
    async getMenuList() {
      const { data } = await this.$http.get('menus')
      // 如果获取失败 提示用户
      if (data.meta.status != 200) return this.$message.error('菜单栏获取失败')
      // 将获取的菜单栏赋值给data中的menuList
      this.menuList = data.data
    },
    // 退出
    logout() {
      // 移除token
      sessionStorage.removeItem('token')
      // 跳转到登陆页
      this.$router.push('/login')
    }
    // 方式1: 菜单栏保持激活状态
    // saveActive(path) {
    //   点击的时候手动赋值激活路径
    //   this.path = '/home/' + path
    //   sessionStorage.setItem('path', '/home/' + path)
    // },
  },
  // 方式2: 菜单栏保持激活状态
  watch: {
    '$route.path'() {
      return this.$route.path
    }
  },
  created() {
    this.getMenuList()
    // 用户刷新页面 从session中取出需要激活的路径
    // this.path = sessionStorage.getItem('path')
  }
}
</script>

<style lang='less'>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
// 侧边栏边框设置
.home-container,
.home-main {
  height: 100%;
  .main-aside {
    border-right: solid 1px #e6e6e6;
    .el-menu {
      border-right: 0;
    }
  }
}
// 头像下边框
.el-menu--horizontal > .el-menu-item.is-active {
  border: 0;
}

// logo相关
.home-nav {
  .el-menu-item:first-child {
    margin-right: 110px;
  }
  .el-menu-item:last-child {
    float: right;
  }
  .avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: relative;
    top: -11px;
    right: 15px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
  }
}
.logo {
  width: 50px;
  height: 50px;
  img {
    width: 100%;
    height: 100%;
  }
}
// 主体区域
.home-main {
  display: flex;
}
.home-main {
  .main-content {
    flex: 1;
    padding: 20px;
    .toggle {
      .el-button {
        padding: 5px 10px;
      }
    }
    .main-rv {
      padding-top: 15px;
    }
  }
}
</style>